<script setup lang="ts">
import { ref, computed, PropType } from 'vue'

//引入SendShopDetail组件
import SendShopDetail from './sendShopDetail.vue'

type PLATFORM = 'WECHAT_MINI_APP' | 'WECHAT_MP' | 'PC' | 'H5' | 'IOS' | 'ANDROID' | 'HARMONY'

// 获取当前选中的tabs的current
const props = defineProps({
    current: {
        type: Number,
        default: 0,
    },
    detail: {
        type: Object as () => Detail,
        default: () => {},
    },
    listname: {
        type: String,
        default: '',
    },
    deliverTypeList: {
        type: Array as PropType<
            {
                label: string
                value: 'IC_MERCHANT' | 'IC_OPEN'
            }[]
        >,
        default: () => [],
    },
})
console.log('props', props.detail)
interface Detail {
    id: string
    no: string
    extra: {
        distributionMode?: string
    }
    orderPayment: {
        payAmount: number
    }
    shopOrders: {
        orderNo: string
        no: string
        shopOrderItems: {
            productName: string
            image: string
            specs: string
            num: number
            packageId: string
        }[]
    }[]
}
// console.log('props', props.detail)

//计算属性出props.detail的shopOrders
const shopName = computed(() => {
    return props.detail.shopOrders[0].shopOrderItems[0].productName
})
const shopPrice = computed(() => {
    return (props.detail.orderPayment.payAmount / 10000).toFixed(2)
})
const shopNum = computed(() => {
    return props.detail.shopOrders[0].shopOrderItems[0].num
})

const shopSpecs = computed(() => {
    return props.detail.shopOrders[0].shopOrderItems[0].specs
})
const shopOrder = computed(() => {
    return {
        orderNo: props.detail.shopOrders[0].orderNo,
        shopOrderNo: props.detail.shopOrders[0].no,
        platform: props.detail.platform,
        distributionMode: props.detail.extra.distributionMode,
    }
})

//控制发货模块效果
const sendShow = ref(false)

const platformIconMap: Record<PLATFORM, string> = {
    WECHAT_MINI_APP: 'icon-xiaochengxu',
    WECHAT_MP: 'icon-weixin',
    H5: 'icon-shouji2',
    IOS: 'icon-iOS',
    PC: 'icon-zhuomian-diannaoxianshiqi',
    ANDROID: 'icon-anzhuo',
    HARMONY: 'icon-huawei',
}
// const platformDescMap: Record<PLATFORM, string> = {
//     WECHAT_MINI_APP: '小程序',
//     WECHAT_MP: '公众号',
//     H5: 'H5商城',
//     IOS: 'IOS端',
//     PC: 'PC商城',
//     ANDROID: '安卓端',
//     HARMONY: '鸿蒙端',
// }

/**
 * 点击切换发货模块show切换
 */
const handleChangeShow = () => {
    console.log('切换发货模块')
}
/**
 * 点击显示发货弹窗
 */
const handleShowGoodSend = () => {
    sendShow.value = !sendShow.value
}
const handleGotoDetail = () => {
    console.log(props.detail)
    handleNavToDetail(props.detail.no, props.detail.id, props.detail.shopOrders[0].shopOrderItems[0].packageId)
}
/**
 * 导航去订单详情(未支付的订单没有拆分店铺传orderNo即可)
 * @param {*} orderNo
 * @param {*} shopNo
 */
const handleNavToDetail = (orderNo: string, shopId?: string, packageId?: string) => {
    const baseUrl = `/basePackage/pages/ordertSystem/components/OrderDetail?orderNo=${orderNo}&packageId=${packageId ? packageId : ''}&listname=${
        props.listname
    }`
    if (!shopId) return uni.navigateTo({ url: baseUrl })
    const url = `${baseUrl}&shopId=${shopId}`
    uni.navigateTo({ url })
}
</script>

<template>
    <view class="item">
        <view class="item__left">
            <u-avatar :src="props.detail.shopOrders[0].shopOrderItems[0].image" mode="square" size="110"></u-avatar>
        </view>
        <view class="item__right">
            <view class="item__top" @click.stop="handleGotoDetail">
                <view class="item__name">{{ shopName }} </view>
                <template v-if="shopSpecs">
                    <view class="item__attributelist">
                        <template v-for="item in shopSpecs" :key="item">
                            <view class="item__attribute"> {{ item }}</view>
                        </template>
                    </view>
                </template>
            </view>
            <!-- 发货弹窗部分 -->
            <template
                v-if="
                    props.current === 1 &&
                    !props.detail.shopOrders[0].shopOrderItems.every((item) => {
                        return item.sellType === 'CONSIGNMENT'
                    }) &&
                    props.detail.extra?.distributionMode !== 'SHOP_STORE' &&
                    props.detail.extra?.distributionMode !== 'INTRA_CITY_DISTRIBUTION'
                "
            >
                <view class="choosegood">
                    <view class="choosegood__left">¥{{ shopPrice }}</view>
                    <view class="choosegood__right" @click.stop="handleShowGoodSend">
                        <u-icon name="huojian" custom-prefix="icon" class="iconfont" size="48" color="##fff"></u-icon>
                    </view>
                    <q-icon
                        color="#fff"
                        :name="platformIconMap[props.detail.platform as PLATFORM]"
                        size="46rpx"
                        style="position: absolute; right: 0; bottom: 0"
                    ></q-icon>
                </view>

                <template v-if="sendShow">
                    <SendShopDetail
                        :send-dialog-show="sendShow"
                        :order="shopOrder"
                        :deliverTypeList="deliverTypeList"
                        @change-show="handleShowGoodSend"
                    >
                    </SendShopDetail>
                </template>
            </template>
            <template v-else>
                <view class="item__bottom" @click="handleChangeShow">
                    <view class="item__price">¥{{ shopPrice }} </view>
                    <view class="item__total">共{{ shopNum }}件 </view>
                </view>
            </template>
        </view>
    </view>
</template>

<style lang="scss" scoped>
@include b(item) {
    width: 722rpx;
    height: 158rpx;
    border-radius: 20rpx;
    background-color: rgba(255, 255, 255, 1);
    color: #101010;
    font-size: 28rpx;
    padding: 24rpx 26rpx 24rpx 22rpx;
    display: flex;

    @include e(attributelist) {
        display: flex;
    }

    @include e(right) {
        width: 100%;
        margin-left: 16rpx;
        display: flex;
        justify-content: space-between;
    }

    @include e(top) {
        width: 310rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        color: rgba(51, 51, 51, 1);
        font-size: 24rpx;
    }

    @include e(bottom) {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        font-size: 24rpx;
    }

    @include e(name) {
        width: 310rpx;

        //多行文字第二行溢出省略号
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-weight: 700;
    }

    @include e(attribute) {
        //单行文字溢出省略号
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        color: rgba(153, 153, 153, 1);
    }

    @include e(total) {
        color: rgba(153, 153, 153, 1);
        text-align: end;
    }
}

@include b(choosegood) {
    width: 254rpx;
    height: 114rpx;
    position: relative;

    @include e(left) {
        width: 140rpx;
        height: 114rpx;
        line-height: 114rpx;
        border-radius: 18rpx;
        background-color: #101010;
        color: #ffffff;
        font-size: 28rpx;
        text-align: center;
        position: absolute;
        z-index: 9999;
    }

    @include e(right) {
        width: 140rpx;
        height: 114rpx;
        line-height: 114rpx;
        border-radius: 18rpx;
        background-color: rgba(71, 85, 233, 1);
        color: #ffffff;
        font-size: 28rpx;
        text-align: center;
        position: absolute;
        right: 0;
        top: 0;
    }
}
</style>
